<template>
    <div class="pageMainBox">
        <div class="titleBox">
            <div class="titleCla">{{props.title || ''}}</div>
            <el-image class="bottomImg" :src="image1"/>
        </div>
        <slot />
    </div>
  </template>
  
  <script setup>
    import image1 from '@/assets/newImage/titleLeft.png'
    import { defineProps } from 'vue'
    const props = defineProps(['title'])
  </script>
  
  <style lang="scss" scoped>
    .pageMainBox {
        width: 459px;
        height: 477px;
        box-shadow: inset 0px 0px 25px 1px rgba(64,229,240,0.3);
        border: 1px solid #006686;
        display: flex;
        flex-direction: column;
    }
    .titleBox {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        background-image: url('@/assets/newImage/titleRight.png');
    }
    .bottomImg {
        width: 144px;
        height: 13px;
        margin-left: 14px;
    }
    .titleCla {
        margin-left: 30px;
        font-size: 13px;
        font-weight: bold;
        color: #fff;
    }
  
  </style>
  